<template>
  <div class='home'>
      <!-- banner -->
      <swiper autoplay indicator-dots='true' indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="white" >
        <swiper-item v-for="(value,index) in imgList" :key="index" @click="toGoodsDetailorGame(value)">
          <img :src="value.img_url" class="slide-image" lazy-load="true" mode="aspectFill"/>
        </swiper-item> 
      </swiper>
      <!-- banner结束 -->
      <div class="aui-product-list">
          <h2>我要拼团</h2>
          <div class="aui-list-theme" v-for="(item,index) of assembleData" :key="index" @click="toGoodsAssemble(item)">
              <div class="aui-list-theme-item">
                  <div class="aui-list-img">
                      <!-- <span class="aui-list-img-tag">
                          <img src="images/sag2.png" alt="">
                      </span> -->
                      <img :src="item.goods_info.thumb_url" alt="" mode="aspectFill">
                  </div>
                  <div class="aui-list-title">
                      <div class="aui-list-title-header">{{item.goods_info.name}}</div>
                      <div>{{item.goods_info.info}}</div>
                      <p>{{item.max_group_num}}人即可拼团</p>
                      <div class="aui-flex">
                          <div class="aui-flex-box">
                              <div>去拼单￥{{item.goods_info.m_price}}</div>
                          </div>
                          <div class="aui-list-right">
                              <span>￥{{item.goods_info.s_price}}</span>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="clearfix"></div>
          </div>
      </div>
  </div>
  
                
</template>

<script>


export default {
  data() {
    return {
      advert:'',//普通广告
      imgList:'',
      page:0,
      assembleData:[],//拼团列
      discountTimer:'',
      countTimer:[]//倒数的定时器
    }
  },


  methods:{

    async getBanner(){
      let res=await this.$request.getData('/other/getBannerList');
      if(res.data.level=='success'){
        this.imgList=res.data.data;
        wx.stopPullDownRefresh()
      }
    },
    async getAssemble(){
      this.clearAllInterval()  
      const res=await this.$request.getData('/activity/getActivityGroupList',{
        // limit:'',
        page:this.page
      })
      if(res.data.level=='success'){
        const data=res.data.data;
        const initData=this.assembleData
        this.assembleData=[...initData,...data]
      }
        // this.discountTimer= this.discountData.map(item=>{
        //   return {'timer':item.end_time}
        //   })
        // this.discountTimer.forEach((item,index)=>{
        //   this.countTime(item,index)
        // })
      // console.log(this.discountTimer,666)
    },
    toAdvert(url){
      let pattern=/^\/pages/
      if(pattern.exec(url)){
        this.$currency.navigateTo(url)
      }else{
        wx.navigateTo({url:'/pages/advert/main?url='+url})
      }
    },
    toGoodsAssemble(item){
      this.$currency.navigateTo(`/pages/goodsAssemble/main?id=${item.goods_id}&activeId=${item.id}`)
    },
    countTime(item,index) {
        var that = this;
        
      const timer=setInterval(()=>{
          var date = new Date();
          var now = date.getTime();
          var endDate = new Date(item.timer);//设置截止时间
          var end = endDate.getTime();
          var leftTime = end - now; //时间差               
          var d, h, m, s, ms;
        //  if(leftTime>=86400){//小于1小时才显示倒计时
        //     that.$set(this.discountTimer,index,{...this.discountTimer[index],showLimitData:true})
        //   }
          if (leftTime >= 0) {
          d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
          h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
          m = Math.floor(leftTime / 1000 / 60 % 60);
          s = Math.floor(leftTime / 1000 % 60);
          // ms = Math.floor(leftTime % 1000);
          // ms = ms < 100 ? "0" + ms : ms
          s = s < 10 ? "0" + s : s
          m = m < 10 ? "0" + m : m
          h = h < 10 ? "0" + h : h

          // this.countdown=d + "：" + h + "：" + m + "：" + s + ":" + ms;
          // console.log(d + "：" + h + "：" + m + "：" + s + ":" + ms)

            if(leftTime>=86400){//小于1小时才显示倒计时
                that.$set(this.discountTimer,index,{...this.discountTimer[index],lastDay:d,lastHour:h,lastMin:m,lastSecond:s,state:'showLimit'})
              }else{
                that.$set(this.discountTimer,index,{...this.discountTimer[index],lastDay:d,lastHour:h,lastMin:m,lastSecond:s,state:'hideLimit'})
              }
          
          
          } else {
            that.$set(this.discountTimer,index,{...this.discountTimer[index],lastDay:d,lastHour:h,lastMin:m,lastSecond:s,state:'timeOut'})//显示活动结束
            console.log('已截止')
          }
          },1000)
          this.countTimer.push(timer)
      },
      clearAllInterval(){//清除所有定时器
        this.countTimer.forEach(item=>{         
          if(item){
            clearInterval(item)
          }
        })
      }
  },
  onReachBottom(){
    this.page++;
    this.getAssemble()
  },
  onPullDownRefresh() {
    this.page=0;
    this.assembleData=[]
    this.getBanner()
    this.getAssemble()
    // Do something when pull down.
  },
   onShareAppMessage(){
     return {
      title: 'F6能量饮微商城',
      desc:'F6功能饮、提神饮、醒酒、解酒能量饮微商城',
    }
  },
  mounted() {
    // this.$store.state.modulesOrder
    this.getBanner();  
  },
  onShow(){
    // this.page
    this.clearAllInterval()
    this.getAssemble();
  },
  onHide(){
    this.assembleData=[]
    this.clearAllInterval()

  },
  onUnload(){
    this.assembleData=[]
    this.clearAllInterval()
  }
}
</script>

<style scoped lang="scss">
  .home{
    width:100%;
    min-height: 100%;
    background:#eee;
  }
  .home_content{
    margin:0 5px;
  }
  swiper{height: 250px;}
.slide-image{width: 100%;height: 250px;}
.c_wrapper{
  display: flex;
  width:100%;
  margin-top:10px;
  background:#eee;
}


// 拼团列
.aui-product-list h2 {
    width: 100%;
    font-size: 18px;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(to right,#ff6143,#ff1767);
    padding: 10px 0;
}

.aui-product-list {
    padding-bottom: 55px;
}

.aui-product-list .aui-list-theme-item {
    background: #fff;
    width: 100%;
    border-radius: 5px;
    position: relative;
    height: 160px;
    margin-bottom: 10px;
}
.aui-list-theme-item{
  display: flex;
}
.aui-product-list .aui-list-img {
    width: 50%;
    float: left;
    position: relative;
    overflow: inherit;
}

.aui-list-img img{
  width: 100%;
  height: 100%;
}

.aui-product-list .aui-list-theme {
    padding: 10px 15px 10px 8px;
    border-radius: 10px;
    overflow: inherit;
}

.aui-product-list .aui-list-title {
    width: 50%;
    padding: 1px 10px 5px 10px;
}



.aui-product-list .aui-list-title p {
    color: #e12317;
    font-size: 16px;
    background: #fbe7e8;
    border-radius: 10px;
    width: 72%;
    padding: 0.1rem 0;
    margin-top:10px;
    text-align: center;
}


.aui-list-title-header{
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin:10px 0;
}

.aui-flex{
  width: 85%;
  position: absolute;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.aui-flex-box{
  color:#fff;
  background-image: linear-gradient(to bottom,#f36758,#d42828);
  padding:5px;
  border-radius: 5px;
}
.aui-list-title{
  position: relative;
}
.aui-list-right{
  text-decoration: line-through;
}
</style>
